<template>
	<view class="">
		<!-- <view class="tabbar_s">
		</view> -->
		<view class="tabbar" :style="{paddingBottom: `${getters.isIOS ? '40rpx' : 0}`}">
			<view class="tabbar_row" @click='onSwitchTab(list[0])'>
				<image class="image" :src=" list[0].selectedIconPath" mode="scaleToFill" v-if='active ==  list[0].id'></image>
				<image class="image" :src=" list[0].iconPath" mode="scaleToFill" v-else></image>
				<text v-if='active ==  list[0].id' class="text active_text">{{list[0].text}}</text>
				<text v-else class="text">{{ list[0].text}}</text>
			</view>
			<view class="tabbar_row" @click='onSwitchTab(list[1])'>
				<image class="image " style="width:20px;" :src=" list[1].selectedIconPath" mode="scaleToFill" v-if='active == list[1].id'></image>
				<image class="image " style="width:20px;" :src="list[1].iconPath" mode="scaleToFill" v-else></image>
				<text v-if='active == list[1].id' class="text active_text">{{list[1].text}}</text>
				<text class="text" v-else>{{list[1].text}}</text>
			</view>
			<!-- <view class="tabbar_row tabbar_midButton" @click='onSwitchTab(list[2])'> -->
			<view class="tabbar_row" @click='onSwitchTab(list[2])'>
				<!-- <view class="top">
					<image class="image"  :src="list[2].selectedIconPath" mode="scaleToFill" v-if='active == list[2].id'></image>
					<image class="image"  :src="list[2].iconPath" mode="scaleToFill" v-else></image>
				</view>
				<view class="bottom">
					<text v-if='active == list[2].id' class="text active_text">{{list[2].text}}</text>
					<text class="text" v-else>{{list[2].text}}</text>
				</view> -->
				
				<image class="image"  :src="list[2].selectedIconPath" mode="scaleToFill" v-if='active == list[2].id'></image>
				<image class="image"  :src="list[2].iconPath" mode="scaleToFill" v-else></image>
				
				<text v-if='active == list[2].id' class="text active_text">{{list[2].text}}</text>
				<text class="text" v-else>{{list[2].text}}</text>
				
		
			</view>
			<view class="tabbar_row" @click='onSwitchTab(list[3])'>
				<image class="image"  :src="list[3].selectedIconPath" mode="scaleToFill" v-if='active == list[3].id'></image>
				<image class="image" style="width:18px;" :src="list[3].iconPath" mode="scaleToFill" v-else></image>
				<text v-if='active == list[3].id' class="text active_text">{{list[3].text}}</text>
				<text class="text" v-else>{{list[3].text}}</text>
			</view>
			<view class="tabbar_row" @click='onSwitchTab(list[4])'>
				<image class="image" :src="list[4].selectedIconPath" mode="scaleToFill" v-if='active == list[4].id'></image>
				<image class="image" :src="list[4].iconPath" mode="scaleToFill" v-else></image>
				<text v-if='active == list[4].id' class="text active_text">{{list[4].text}}</text>
				<text class="text" v-else>{{list[4].text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/utils/getRequest.js'
	export default {
		name: "tabbar",
		props:{
			active:{
				type:[String,Number],
				default:0
			}
		},
		data() {
			return {
				paddingBottom: 0,
				list: [{
						id: 0,
						iconPath: "/static/image/icon/shouye.png",
						selectedIconPath: "/static/image/icon/shouye2.png",
						text: "首页",
						url:'/pages/index/index'
					},
					{
						id: 1,
						pagePath: "/pages/liveBroadcast/index",
						iconPath: "/static/image/icon/zfenlei.png",
						selectedIconPath: "/static/image/icon/zfenlei2.png",
						text: "社区服务",
						url:'/pagesCommodity/totalClassification'
					},
					// {
					// 	id: 1,
					// 	pagePath: "/pages/liveBroadcast/index",
					// 	iconPath: "/static/image/icon/jiangshu.png",
					// 	selectedIconPath: "/static/image/icon/jiangshu2.png",
					// 	text: "讲述",
					// 	url:'/pages/video/designerInterview'
					// },
					{
						id: 2,
						iconPath: "/static/image/icon/jingsuandan.png",
						selectedIconPath: "/static/image/icon/jingsuandan2.png",
						text: "消息列表",
						url:'/pagesChat/systemMessage'
					},
					{
						id: 3,
						iconPath: "/static/image/icon/zhuangxiuzs.png",
						selectedIconPath: "/static/image/icon/zhuangxiuzs2.png",
						text: "社区新闻",
						url:'/pagesHome/workmanship'
					},
					// {
					// 	id: 3,
					// 	iconPath: "/static/image/icon/zhaolinggan.png",
					// 	selectedIconPath: "/static/image/icon/zhaolinggan2.png",
					// 	text: "找灵感",
					// 	url:'/pages/video/shortVideo'
					// },
					{
						id: 4,
						iconPath: "/static/image/icon/wode.png",
						selectedIconPath: "/static/image/icon/wode2.png",
						text: "我的",
						url:'/pagesMy/my/index'
					}
				]
			}
		},
		onLoad() {},
		onReady() {
			
		},
		methods: {
			onSwitchTab(row) {
				if(row.id == this.active) return
				uni.redirectTo({
					url:row.url
				})
			},
			async getInfoUser() {
				try {
					var result = await getUserInfo()
					this.$store.commit('setUser', result)
					// uni.setStorageSync('TZ_userInfo', result)
				} catch (err) {
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.tabbar_s{
		width: 750rpx;
		height: 104rpx;
	}
	.tabbar {
		width: 750rpx;
		height: 104rpx;
		position: fixed;
		bottom: 0;
		z-index: 9999;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #ffffff;
		box-shadow: 0px -10px 20px 0px rgba(213, 213, 213, 0.16);
		// box-sizing: border-box;
		.tabbar_row {
			// width: 90%;
			height: 104rpx;
			width: 130rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-content: center;
			text-align: center;
			justify-content: center;
			.image {
				align-self: center;
				width: 44rpx;
				height: 44rpx;
				margin-bottom: 12rpx;
			}
		}

		.text {
			display: inline-block;
			font-size: 20rpx;
			color: #000000;
			line-height: 28rpx;
		}

		.active_text {
			display: inline-block;
			font-size: 20rpx;
			color: #26252B;
			line-height: 28rpx;
		}

		.tabbar_midButton {
			position: relative;
			width: 150rpx;
			height: 104rpx;
			.top {
				position: absolute;
				left: 50%;
				top: -50rpx;
				transform: translateX(-50%);
				content: '';
				z-index: 9;
				width: 120rpx;
				height: 120rpx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				background-color: #fff;
				box-shadow: 0px -10px 20px 0px rgba(213, 213, 213, 0.16);
				.image {
					width: 90rpx;
					height: 90rpx;
				}
				
			}
			.bottom {
				position: absolute;
				left: 50%;
				bottom:16rpx;
				transform: translateX(-50%);
				content: '';
				z-index: 9;
			}

		}
	}
</style>
